<template>
	<div class="header">
		<div class="logo"></div>
		<el-row>
			<el-col :span="10" data-step="1" data-intro="这里是导航栏!">
				<div class="grid-content bg-purple">
					<!-- 文件 -->
					<el-badge v-show='this.$route.path!="/equiCognition"&&this.$route.path!="/carExperiment"&&this.$route.path!="/metroExperiment"&&this.$route.path!="/test"'
					 class="item" type="primary">
						<el-button size="small" @click="fileVisible = true">文件</el-button>
					</el-badge>
					<el-dialog class="fileDialig" title='' :visible.sync="fileVisible">
						<div class="text item" @click='newMyDiagram'>
							<div class='smallicon'><img src="../../assets/img/head/newFile.png" alt=""></div>
							<div style="color:#12ccf7">新建</div>
						</div>
						<div class="text item">
							<div class='smallicon'><img src="../../assets/img/head/open.png" alt=""></div>
							<a href="javascript:;" @click='importJSON' class="a-upload">
								<div style="color:#12ccf7">打开</div>
							</a>
						</div>
						<div class="text item" @click='saveData'>
							<div class='smallicon'><img src="../../assets/img/head/save.png" alt=""></div>
							<div style="color:#12ccf7">保存</div>
						</div>
						<!-- <div class="text item">另存为</div> -->
					</el-dialog>
					<!-- 实例信息 -->
					<el-badge v-show='this.$route.query.id&&this.$route.query.id=="0"'
					 class="item" type="primary">
						<el-button size="small" @click="dialogTableVisible = true;ratFormula(value)">实例信息</el-button>
					</el-badge>
					<el-dialog class="inforDialig" title="" :visible.sync="dialogTableVisible">
						<el-select v-model="value" placeholder="请选择" style="margin-bottom:20px" @click='ratFormula(value)'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-radio-group v-show="value=='1'||value=='9'" v-model="radio" @change='ratFormula(value)'
						 style="margin-left:10px">
							<el-radio :label="3">复数</el-radio>
							<el-radio :label="6">幅值相角形式</el-radio>
							<el-radio :label="9">标幺</el-radio>
						</el-radio-group>
						<!-- <el-button size="small" style="float: right;">确定</el-button> -->
						<!-- 母线 -->
						<!-- <el-radio-group v-show="value=='1'" v-model="radio1" style="float:right;margin-top:10px;margin-right:60px">
							<el-radio :label="1">负荷</el-radio>
							<el-radio :label="2">发电机</el-radio>
						</el-radio-group> -->
						<el-table v-show="value=='1'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="normalvolt" label="基准电压"></el-table-column>
							<el-table-column label="电压">
								<el-table-column property="voltA" label="A相" width='180'></el-table-column>
								<el-table-column property="voltB" label="B相" width='180'></el-table-column>
								<el-table-column property="voltC" label="C相" width='180'></el-table-column>
							</el-table-column>
							<!-- <el-table-column property="activePowerA" label="有功功率" width='100'></el-table-column>
							<el-table-column property="reactivePowerA" label="无功功率"></el-table-column> -->
						</el-table>
						<!-- 配电线路 -->
						<el-table v-show="value=='2'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称" width='100'></el-table-column>
							<el-table-column property="startPoint" label="首端节点"></el-table-column>
							<el-table-column property="endPoint" label="末端节点" width='100'></el-table-column>
							<el-table-column property="length" label="长度"></el-table-column>
							<el-table-column property="current" label="电流"></el-table-column>
							<el-table-column property="power" label="功率"></el-table-column>
							<el-table-column property="z11" label="z11" width="120"></el-table-column>
							<el-table-column property="z12" label="z12" width="120"></el-table-column>
							<el-table-column property="z13" label="z13" width="120"></el-table-column>
							<el-table-column property="z21" label="z21" width="120"></el-table-column>
							<el-table-column property="z22" label="z22" width="120"></el-table-column>
							<el-table-column property="z23" label="z23" width="120"></el-table-column>
							<el-table-column property="z31" label="z31" width="120"></el-table-column>
							<el-table-column property="z32" label="z32" width="120"></el-table-column>
							<el-table-column property="z33" label="z33" width="120"></el-table-column>
						</el-table>
						<!-- 变压器 -->
						<el-table v-show="value=='3'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="powerRating" label="总容量"></el-table-column>
							<el-table-column property="resistance" label="电阻"></el-table-column>
							<el-table-column property="reactance" label="电抗"></el-table-column>
							<el-table-column property="onceVolt" label="一次测电压"></el-table-column>
							<el-table-column property="twiceVolt" label="二次测电压"></el-table-column>
						</el-table>
						<!-- 同步发电机 -->
						<el-table v-show="value=='4'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column label="功率">
								<el-table-column property="powerA" label="A相" width='160'></el-table-column>
								<el-table-column property="powerB" label="B相" width='100'></el-table-column>
								<el-table-column property="powerC" label="C相"></el-table-column>
							</el-table-column>
							<el-table-column property="maxPower" label="最大功率"></el-table-column>
							<el-table-column property="minPower" label="最小功率"></el-table-column>
						</el-table>
						<!-- 光伏 -->
						<el-table v-show="value=='5'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="photoMode" label="光伏模式"></el-table-column>
							<el-table-column property="PVStatus" label="光伏状态" width='100'></el-table-column>
							<el-table-column property="panleType" label="面板类型"></el-table-column>
							<el-table-column property="efficiency" label="效率"></el-table-column>
							<el-table-column property="area" label="面积"></el-table-column>
						</el-table>
						<!-- 风电 -->
						<el-table v-show="value=='6'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="windPowerMode" label="风电模式"></el-table-column>
							<el-table-column property="windPowerStatus" label="风电状态" width='100'></el-table-column>
							<el-table-column property="windPowerType" label="风电类型"></el-table-column>
							<el-table-column property="windPowerModel" label="风电模型"></el-table-column>
						</el-table>
						<!-- 电动汽车 -->
						<el-table v-show="value=='7'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="chargingType" label="充电类型"></el-table-column>
							<el-table-column property="workCharging" label="工作充电" width='100'></el-table-column>
							<el-table-column property="chargingEfficiency" label="充电效率"></el-table-column>
							<el-table-column property="capacity" label="容量"></el-table-column>
						</el-table>
						<!-- 储能-->
						<el-table v-show="value=='8'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="generatorMode" label="电池模式"></el-table-column>
							<el-table-column property="generatorStatus" label="电池状态" width='100'></el-table-column>
							<el-table-column property="powerFactor" label="功率因数"></el-table-column>
							<el-table-column property="parasiticPowerDraw" label="电池寄生功率损耗"></el-table-column>
							<el-table-column property="baseEfficiency" label="额定效率"></el-table-column>
							<el-table-column property="VMax" label="最大电压"></el-table-column>
							<el-table-column property="IMax" label="最大电流" width='100'></el-table-column>
							<el-table-column property="PMax" label="最大有功功率"></el-table-column>
							<el-table-column property="EMax" label="最大能量"></el-table-column>
							<el-table-column property="energy" label="储存能量"></el-table-column>
						</el-table>
						<!-- 负荷表格 -->
						<el-table v-show="value=='9'" height='300' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData">
							<el-table-column property="id" label="序号"></el-table-column>
							<el-table-column property="name" label="名称"></el-table-column>
							<el-table-column property="powerA" label="A相功率"></el-table-column>
							<el-table-column property="powerB" label="B相功率"></el-table-column>
							<el-table-column property="powerC" label="C相功率"></el-table-column>
						</el-table>
					</el-dialog>
					<!-- 故障设定 -->
					<!-- <el-badge class="item" type="primary">
						<el-button size="small" @click="dialogSetFailure = true">故障设定</el-button>
					</el-badge>
					<el-dialog title="" class="faultDialig" :visible.sync="dialogSetFailure">
						<el-container style="height: 300px; border: 1px solid #eee">
							<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
								<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
							</el-aside>
							<el-container>
								<el-main>
									<el-table :cell-style="cellStyle" v-show="lableData=='负荷'" :data="loadData">
										<el-table-column prop="id" label="序号" width="140">
										</el-table-column>
										<el-table-column prop="name" label="负荷名称" width="120">
										</el-table-column>
										<el-table-column prop="weightGrade" label="权重等级">
										</el-table-column>
										<el-table-column prop="weightCoefficient" label="权重系数">
										</el-table-column>
									</el-table>
									<el-table :cell-style="cellStyle" v-show="lableData=='节点'" :data="loadData">
										<el-table-column prop="id" label="序号" width="140">
										</el-table-column>
										<el-table-column prop="name" label="节点" width="120">
										</el-table-column>
										<el-table-column prop="weightGrade" label="电压上限">
										</el-table-column>
										<el-table-column prop="weightCoefficient" label="电压下限">
										</el-table-column>
									</el-table>
									<el-table :cell-style="cellStyle" v-show="lableData=='分布式'" :data="loadData">
										<el-table-column prop="id" label="序号" width="140">
										</el-table-column>
										<el-table-column prop="name" label="分布式电源" width="120">
										</el-table-column>
										<el-table-column prop="weightGrade" label="出力上限">
										</el-table-column>
										<el-table-column prop="weightCoefficient" label="出力下限">
										</el-table-column>
									</el-table>
									<el-table :cell-style="cellStyle" v-show="lableData=='线路'" :data="loadData">
										<el-table-column prop="id" label="序号" width="140">
										</el-table-column>
										<el-table-column prop="name" label="线路名称" width="120">
										</el-table-column>
										<el-table-column prop="weightGrade" label="电流上限">
										</el-table-column>
										<el-table-column prop="weightCoefficient" label="是否故障">
										</el-table-column>
									</el-table>
								</el-main>
							</el-container>
						</el-container> -->
					<!-- 指导原则 -->
					<!-- <el-dialog width="30%" class='guidDialog' title="" :visible.sync="innerVisible1" append-to-body>
							<el-row :gutter="20">
								<div class="grid-content bg-purple" style="margin-top:20px;color: #2af5ff;padding:10px">
									指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则
									指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则指导原则
								</div>
							</el-row>
							<el-button style="margin:10px" type="primary" @click='test=true'>考试</el-button>
						</el-dialog> -->
					
					<!-- <el-dialog width="30%" class='faultRecovery' title="" :visible.sync="innerVisible2" append-to-body>
							<div style="margin:20px">不同时段负荷是否连接</div>
							<el-table :cell-style="cellStyle" :data="recoveryPolicy" style="width: 100%">
								<el-table-column prop="nodeT" label="负荷\时段">
								</el-table-column>
								<el-table-column prop="T1" label="T1">
								</el-table-column>
								<el-table-column prop="T2" label="T2">
								</el-table-column>
								<el-table-column prop="T3" label="T3">
								</el-table-column>
								<el-table-column prop="T4" label="T4">
								</el-table-column>
							</el-table>
							<div style="margin:20px">发电机不同时段输出的有功功率</div>
							<el-table :cell-style="cellStyle" :data="recoveryPolicy" style="width: 100%">
								<el-table-column prop="nodeT" label="负荷\时段">
								</el-table-column>
								<el-table-column prop="T1" label="T1">
								</el-table-column>
								<el-table-column prop="T2" label="T2">
								</el-table-column>
								<el-table-column prop="T3" label="T3">
								</el-table-column>
								<el-table-column prop="T4" label="T4">
								</el-table-column>
							</el-table>
							<el-button style="margin:10px" @click="recoverySteps = true" type="primary">恢复步骤</el-button>
						</el-dialog>
						<div slot="footer" class="dialog-footer">
							<el-checkbox style="float:left" fill="#ccc" v-model="checked">已阅读<a @click="innerVisible1 = true" href="javaScript:(0)">指导原则</a></el-checkbox>
							<el-button type="primary" @click="innerVisible2 = true">生成策略</el-button>
						</div>
					</el-dialog>
					<el-dialog title="" class="recoveryDialog" :visible.sync="recoverySteps">
						<el-table :cell-style="cellStyle" :data="orderData">
							<el-table-column property="id" label="步骤"></el-table-column>
							<el-table-column property="order" label="恢复顺序"></el-table-column>
						</el-table>
					</el-dialog> -->
					<!-- 故障分析 -->
					<!-- 实验步骤 -->
					<el-badge v-show='this.$route.path!="/equiCognition"&&this.$route.path!="/carExperiment"&&this.$route.path!="/metroExperiment"&&this.$route.path!="/test"'
					 class="item" type="primary">
						<el-button size="small" @click="dialogInformation = true">实验步骤</el-button>
					</el-badge>
					<!-- 实验步骤 -->
					<el-dialog title="" class='testStep' :visible.sync="dialogInformation">
						<el-collapse v-model="activeName" accordion>
							<div v-for="(item,i) of collapseData" :key='i+"0"'>
								<!-- <p>{{i+1}}</p> -->
								<el-collapse-item :title="item.title">
									<div v-for="(items,j) of item.data" @click='showStep(items);showStepInfor=true'>
										<el-divider></el-divider>
										<p class="detileStep" @click="playVideo($event)">步骤{{j+1}}:{{items.step}}</p>
										<video class="wavFile" :src=items.videoSrc width="0" height="0" autostart="false" style="float: left;">
										</video>
									</div>
								</el-collapse-item>
							</div>
						</el-collapse>
					</el-dialog>
					<!-- 实验步骤详情 -->
					<el-dialog class="testStepDetile" :title=stepInforTitle :visible.sync="showStepInfor" @closed="stopVideo()">
						{{stepInfor}}
					</el-dialog>
					<el-badge class="item">
						<!-- <el-button size="small">模块选择</el-button> -->
						<el-dropdown>
							<el-button class="button_max" type="primary">
								实验模块选择<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<!-- <el-popover  v-show='this.$route.path=="/equiCognition"' placement="right" width="100" trigger="hover">
									<el-dropdown-item @click.native='test=true'>认知测试</el-dropdown-item>
									<el-dropdown-item slot="reference" @click.native='equiCognition()'>设备认知</el-dropdown-item>
								</el-popover> -->
								<el-dropdown-item @click.native='equiCognition()'>设备认知</el-dropdown-item>
								<router-link to="/home?id=0">
									<el-dropdown-item>仿真搭建</el-dropdown-item>
								</router-link>
								<router-link to="/home?id=1">
									<el-dropdown-item>轨道交通实验</el-dropdown-item>
								</router-link>
								<router-link to="/home?id=2">
									<el-dropdown-item>电动汽车实验</el-dropdown-item>
								</router-link>
								<!-- <el-dropdown-item @click.native='test=true'>设备识别</el-dropdown-item> -->
							</el-dropdown-menu>
						</el-dropdown>
					</el-badge>
					
					<el-badge class="item">
						<!-- <el-button size="small">模块选择</el-button> -->
						<el-dropdown>
							<el-button class="button_max" type="primary">
								实验在线考核<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<!-- <router-link> -->
									<el-dropdown-item>实验总结性考核</el-dropdown-item>
								<!-- </router-link> -->
								<router-link to="/test">
									<el-dropdown-item>知识点答题考核</el-dropdown-item>
								</router-link>
							</el-dropdown-menu>
						</el-dropdown>
					</el-badge>
					<!-- 帮助 -->
					<!-- <el-badge v-show='this.$route.path=="/home"' class="item help" type="primary">
						<el-button size="small" @click="infor()">帮助</el-button>
					</el-badge> -->
				</div>
			</el-col>
			<div id="icons"
			 style="float:right;width:190px" data-step="2" data-intro="这里是状态栏!">
				<!-- <div class="icon" @click="heatmapinit">
					<img src="../../assets/img/head/heatmap.png" style="margin-top:10px;" alt="">
				</div> -->
				<div class="icon" @click="run" v-show='this.$route.path=="/home"'>
					<img v-if='isRun==true' src="../../assets/img/head/run.png" alt="">
					<img v-else src="../../assets/img/head/run_click.png" alt="">
				</div>
				<div class="icon" @click="stop" v-show='this.$route.path=="/home"'>
					<img v-if='isRun==false' src="../../assets/img/head/purse.png" style="margin-top:10px;" alt="">
					<img v-else src="../../assets/img/head/purse_click.png" style="margin-top:10px;" alt="">
				</div>
				<div class="icon" @click="handleFullScreen" style="float:right;margin-right:50px">
					<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
						<img src="../../assets/img/head/fullScreen.png" style="margin-top:10px;" alt="">
					</el-tooltip>
				</div>
			</div>
		</el-row>
	</div>
</template>
<script>
	import CryptoJS from 'crypto-js';
	export default {
		props: {
			voltData: Array,
			currData: Array,
			modelParameterData: Object
		},
		data() {
			return {
				fileVisible: false,
				test: false,
				showStepInfor: false,
				stepInforTitle: '',
				stepInfor: '',
				recoverySteps: false,
				innerVisible1: false,
				innerVisible2: false,
				checked: false,
				loadData: [
					{
						id: '1',
						name: '',
						weightGrade: '',
						weightCoefficient: ''
					}, {
						id: '2',
						name: '',
						weightGrade: '',
						weightCoefficient: ''
					}, {
						id: '3',
						name: '',
						weightGrade: '',
						weightCoefficient: ''
					},
				],
				collapse: false,
				//实验步骤
				collapseData: [
						{
						title: '1. 设备认知',
						data: [{
							step: '系统结构及基本原理认知',
							stepInfor: '学生通过动画显示和语音解说，了解电气化交通负荷的主要组成和基本工作原理。',
							videoSrc: require('../../assets/video/1.wav')
						}, {
							step: '配电网主要组成元件认知',
							stepInfor: '学生通过鼠标点击各设备的虚拟场景，对配电网的关键设备进行认知，掌握配电网的架构与连接方式。',
							videoSrc: require('../../assets/video/2.wav')
						}, {
							step: '轨道交通设备认知',
							stepInfor: '学生使用鼠标点击轨道交通设备，了解车组的启动、加速、制动过程以及地铁制动过程中的能量回馈过程，对地铁轨道交通的各设备与地铁运行原理进行学习认知。',
							videoSrc: require('../../assets/video/3.wav')
						}, {
							step: '电动汽车场景设备认知',
							stepInfor: '学生通过鼠标操作，对电动汽车的参数、充电桩性能等进行认知，掌握实物、电气符号的对应关系，并对电动汽车充放电场景进行模拟。',
							videoSrc: require('../../assets/video/4.wav')
						}, {
							step: '认知测试',
							stepInfor: '设置考核环节，通过选择、填空、判断等题目测试学生对城市电气化交通系统内部设备外型、参数、特性等知识的掌握程度。',
							videoSrc: require('../../assets/video/5.wav')
						}]
					}, {
						title: '2. 仿真搭建',
						data: [{
							step: '配电网搭建',
							stepInfor: '在含城市交通系统的配电网中，学生根据给定的拓扑结构，选择配电网所需的组成元件和反应城市交通系统与电网交互的电动汽车充电站模块和轨道交通模块。按照顺序逐一连接各元件和模块，完成配电网仿真模型搭建。',
							videoSrc: require('../../assets/video/6.wav')
						}, {
							step: '配电网参数设置',
							stepInfor: '在搭建好的配电网仿真模型中，学生根据要求，逐一设置各元件参数，及电动汽车充电站模块和轨道交通模块参数。完成参数设置后，学生需确认所设参数满足电力系统运行的基本等式和不等式条件。',
							videoSrc: require('../../assets/video/7.wav')
						}, {
							step: '潮流计算',
							stepInfor: '学生选择运行，软件将对学生所搭建的仿真模型进行校验，校验无误后软件将进行潮流计算，计算整个网络的电压、电流、功率、功率流向等系统运行数据。',
							videoSrc: require('../../assets/video/8.wav')
						}]
					}, {
						title: '3. 轨道交通实验',
						data: [{
							step: '地铁列车班次设定',
							stepInfor: '界面出现轨道交通系统拓扑结构，提示学生使用鼠标点击右下方“创建轨道交通列车”按钮，设置当前轨道交通系统中列车类型，提示学生使用鼠标双击列车，设置列车日运行排班表。',
							videoSrc: require('../../assets/video/9.wav')
						}, {
							step: '无能馈系统实验',
							stepInfor: '引导学生点击各地铁站能馈系统并全部选择关闭，点击轨道交通模拟运行按钮，显示列车一日内运行动画，点击“日运行情况”按钮查看轨道交通日运营成本及能耗。',
							videoSrc: require('../../assets/video/10.wav')
						}, {
							step: '能馈系统实验',
							stepInfor: '与无能馈系统实验操作类似，需要选择启动各地铁站能馈系统。观察有能馈系统后的效果。',
							videoSrc: require('../../assets/video/11.wav')
						}]
					}, {
						title: '4. 电动汽车实验',
						data: [{
							step: '电动汽车添加与参数设定',
							stepInfor: '界面出现系统结构图，引导学生点击充电站进入内部场景，添加电动汽车，设置当日在该充电站需要充电的电动汽车数量、充电方式、到站时SOC等参数。',
							videoSrc: require('../../assets/video/12.wav')
						}, {
							step: '电动汽车有序充电实验',
							stepInfor: '学生可尝试不同的电动汽车充电方式和充电时间等参数。点击“运行”按钮模拟，得到负荷功率波动曲线、耗电成本等相关数据，记录并观察其特点。学生通过调整充电时间和充电方式等参数，使电动车进行有序充电，并和无序充电的情况比较负荷最高功率点的变化。',
							videoSrc: require('../../assets/video/13.wav')
						}, {
							step: '有序充电及潮流计算',
							stepInfor: '学生点击返回配电网仿真模型，进行潮流计算。学生需分别记录有序充电情况下与无序充电情况下潮流计算的结果。观察得到电压、电流等系统运行参数，观察是否出现电压偏移过大、功率越限等问题。总结有序充电方式的有利影响。',
							videoSrc: require('../../assets/video/14.wav')
						}]
					}, 
				],
				fullscreen: false,
				dialogTableVisible: false,
				//负荷表格
				loadGrid: [{
						id: '1',
						name: '',
						voltA: '',
						activePowerA: '',
						reactivePowerA: '',
						apparentPowerA: '',
						voltB: '',
						activePowerB: '',
						reactivePowerB: '',
						apparentPowerB: '',
						voltC: '',
						activePowerC: '',
						reactivePowerC: '',
						apparentPowerC: '',
					}
				],
				gridData: [],
				dialogInformation: false,
				//实例信息下拉框
				options: [
					{
						value: '1',
						label: '母线'
					}, {
						value: '2',
						label: '配电线路'
					}, {
						value: '3',
						label: '变压器'
					}, {
						value: '4',
						label: '柴油发电机'
					}, {
						value: '5',
						label: '光伏'
					}, {
						value: '6',
						label: '风电'
					}, {
						value: '7',
						label: '电动汽车'
					}, {
						value: '8',
						label: '储能'
					}, {
						value: '9',
						label: '负荷'
					},
				],
				dialogSetFailure: false,
				//故障设定菜单列表
				data: [
					{
						label: '目标设定',
						children: [{
							label: '负荷',
						}]
					}, {
						label: '约束设定',
						children: [{
							label: '节点',
						}, {
							label: '分布式',
						}]
					}, {
						label: '场景设定',
						children: [{
							label: '线路',
						}]
					}
				],
				lableData: '负荷',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '1',
				radio: 3,
				radio1: '',
				activeName: '',
				recoveryPolicy: [
					{
						nodeT: 'Node1',
						T1: '0',
						T2: '1',
						T3: '0',
						T4: '1'
					}, {
						nodeT: 'Node2',
						T1: '0',
						T2: '1',
						T3: '0',
						T4: '1'
					}, {
						nodeT: 'Node3',
						T1: '0',
						T2: '1',
						T3: '0',
						T4: '1'
					}, {
						nodeT: 'Node2',
						T1: '0',
						T2: '1',
						T3: '0',
						T4: '1'
					},
				],
				orderData: [
					{
						id: '1',
						order: '断开线路646-654',
					}, {
						id: '2',
						order: '启动DG1',
					}, {
						id: '3',
						order: '闭合联络开关634-675',
					}, {
						id: '4',
						order: '线路',
					},
				],
				isRun: true,
			};
		},
		watch: {
			voltData: function(a, b) {
				if (a.length != 0) {
					this.isRun = false;
				}
			},
			value: function(a, b) {
				this.ratFormula(a)
			},
		},
		computed: {},
		methods: {
			equiCognition() {
				if (this.$route.path == '/equiCognition') {
					return;
				}
				this.$router.push('/equiCognition');
				setTimeout(() => {
					location.reload();
				}, 500);
			},
			infor() {
				this.$parent.infor();
			},
			cellStyle() {
				return "backgroundColor:#011633;color:#ccc;textAlign:center"
			},
			headerStyle() {
				return "text-align:center"
			},
			showStep(data) {
				this.stepInforTitle = data.step;
				this.stepInfor = data.stepInfor;
			},
			//停止音频
			stopVideo(){
				let videoElement = document.getElementsByTagName('video');
				if (videoElement && videoElement.length > 0) {
					for (let i = 0; i < videoElement.length; i++) {
						videoElement[i].pause()
					}
				}
			},
			//播放音频
			playVideo(event) {
				let node = event.currentTarget.nextElementSibling;
				let videoElement = document.getElementsByTagName('video');
				if (videoElement && videoElement.length > 0) {
					for (let i = 0; i < videoElement.length; i++) {
						if (videoElement[i] === node) {
							videoElement[i].play();
							videoElement[i].currentTime = 0;
						} else {
							videoElement[i].pause()
						}
					}
				}
			},
			handleNodeClick(data) {
				if (data.label == "目标设定" || data.label == "约束设定" || data.label == "场景设定") {
					return
				}
				this.lableData = data.label;
			},
			heatmapinit() {
				this.$parent.heatmapinit();
			},
			run() {
				this.$parent.run();
			},
			stop() {
				this.isRun = true;
				this.$parent.stop();
			},
			newMyDiagram() {
				this.$parent.newMyDiagram();
				this.fileVisible = false
			},
			saveData() {
				this.$parent.saveData();
			},
			importJSON() {
				this.$parent.importJSON();
				this.fileVisible = false
			},
			saveData() {
				this.$parent.saveData();
				this.fileVisible = false
			},
			//实例信息
			ratFormula(value) {
				// 复数形式转数组
				function changeArray(newArray) {
					let arrs = newArray.split("");
					console.log(arrs)
					let arr1 = [];
					for (let i = 0; i < arrs.length; i++) {
						if (arrs[i] == "+") {
							arr1 = newArray.split("+")
						} else if (arrs[i] == "-" && i != 0) {
							arr1 = newArray.split("-")
						}
					}
					if (arr1[0] == "") {
						arr1.shift()
					}
					arr1[0] = parseFloat(arr1[0])
					arr1[1] = parseFloat(arr1[1])

					return arr1;
				}
				//去除字符串中的数字
				function trimNumber(str) {
					console.log(str)
					return str.replace(/\d+/g, '');
				}

				//幅值相角
				function amplitudeAndAngle(value) {
					let arrs = value.split("");
					console.log(arrs)
					let arr1 = [];
					for (let i = 0; i < arrs.length; i++) {
						if (arrs[i] == "+") {
							arr1 = value.split("+")
						} else if (arrs[i] == "-" && i != 0) {
							arr1 = value.split("-")
						}
					}
					if (arr1[0] == "") {
						arr1.shift()
					}
					console.log(arr1)
					arr1[0] = parseFloat(arr1[0])
					arr1[1] = parseFloat(arr1[1])
					let amplitude = Math.sqrt(arr1[0] * arr1[0] + arr1[1] * arr1[1]).toFixed(6); //幅值
					let phaseAngle = Math.atan(arr1[1] / arr1[0]).toFixed(6); //相角
					return amplitude + '+∠' + phaseAngle;
				}
				//标幺值
				function unitValue(value, nominal_voltage) {
					let arrs = value.split("");
					let arr1 = [];
					for (let i = 0; i < arrs.length; i++) {
						if (arrs[i] == "+") {
							arr1 = value.split("+")
						} else if (arrs[i] == "-" && i != 0) {
							arr1 = value.split("-")
						}
					}
					if (arr1[0] == "") {
						arr1.shift()
					}
					arr1[0] = parseFloat(arr1[0])
					arr1[1] = parseFloat(arr1[1])
					let amplitude = Math.sqrt(arr1[0] * arr1[0] + arr1[1] * arr1[1]); //幅值
					return (amplitude / nominal_voltage).toFixed(6)
				}

				let _this = this;
				let modelData = _this.modelParameterData.nodeDataArray;
				let linkData = _this.modelParameterData.linkDataArray;
				let voltArray = _this.voltData;
				//母线
				if (value == '1') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'node') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.normalvolt = modelData[i].modelParameter[5].value;
							if (_this.radio == 3) {
								newObj.voltA = modelData[i].modelParameter[2].value;
								newObj.voltB = modelData[i].modelParameter[3].value;
								newObj.voltC = modelData[i].modelParameter[4].value;
							} else if (_this.radio == 6) {
								if (modelData[i].modelParameter[2].value) {
									newObj.voltA = amplitudeAndAngle(modelData[i].modelParameter[2].value);
									if(newObj.voltA=='NaN+∠NaN'){
										newObj.voltA = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[3].value) {
									newObj.voltB = amplitudeAndAngle(modelData[i].modelParameter[3].value);
									if(newObj.voltB=='NaN+∠NaN'){
										newObj.voltB = modelData[i].modelParameter[3].value;
									}
								}
								if (modelData[i].modelParameter[4].value) {
									newObj.voltC = amplitudeAndAngle(modelData[i].modelParameter[4].value);
									if(newObj.voltC=='NaN+∠NaN'){
										newObj.voltC = modelData[i].modelParameter[4].value;
									}
								}
							} else if (_this.radio == 9) {
								let normalvolt = modelData[i].modelParameter[5].value;
								if (modelData[i].modelParameter[2].value) {
									newObj.voltA = unitValue(modelData[i].modelParameter[2].value, normalvolt);
									if(newObj.voltA=='NaN'){
										newObj.voltA = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[3].value) {
									newObj.voltB = unitValue(modelData[i].modelParameter[3].value, normalvolt);
									if(newObj.voltB=='NaN'){
										newObj.voltB = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[4].value) {
									newObj.voltC = unitValue(modelData[i].modelParameter[4].value, normalvolt);
									if(newObj.voltC=='NaN'){
										newObj.voltC = modelData[i].modelParameter[4].value;
									}
								}
							}

							console.log(newObj)
							_this.gridData.push(newObj)
						}

					}
					console.log(_this.gridData)
				}
				//配电线路
				if (value == '2') {
					console.log(linkData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < linkData.length; i++) {
						let newObj = {};
						newObj.id = num++;
						newObj.name = '配电线路'+(i+1);
						newObj.startPoint = linkData[i].modelParameter[12].value;
						newObj.endPoint = linkData[i].modelParameter[13].value;
						newObj.length = linkData[i].modelParameter[2].value;
						newObj.z11 = linkData[i].modelParameter[3].value;
						newObj.z12 = linkData[i].modelParameter[4].value;
						newObj.z13 = linkData[i].modelParameter[5].value;
						newObj.z21 = linkData[i].modelParameter[6].value;
						newObj.z22 = linkData[i].modelParameter[7].value;
						newObj.z23 = linkData[i].modelParameter[8].value;
						newObj.z31 = linkData[i].modelParameter[9].value;
						newObj.z32 = linkData[i].modelParameter[10].value;
						newObj.z33 = linkData[i].modelParameter[11].value;
						_this.gridData.push(newObj)
					}
					console.log(_this.gridData)
				}
				//变压器
				if (value == '3') {
					console.log(modelData)
					let trans = []
					for (let i = 0; i < modelData.length; i++) {

					}
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'transformer') {
							let startPpoint = modelData[i].modelParameter[8].value;
							console.log(startPpoint)
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.powerRating = modelData[i].modelParameter[3].value;
							newObj.reactance = modelData[i].modelParameter[7].value; //电抗
							newObj.resistance = modelData[i].modelParameter[6].value; //电阻
							newObj.onceVolt = modelData[i].modelParameter[4].value;
							newObj.twiceVolt = modelData[i].modelParameter[5].value;
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//柴油发电机
				if (value == '4') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'generator') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.powerA = modelData[i].modelParameter[11].value;
							newObj.powerB = modelData[i].modelParameter[12].value;
							newObj.powerC = modelData[i].modelParameter[13].value;
							newObj.maxPower = modelData[i].modelParameter[14].value;
							newObj.minPower = modelData[i].modelParameter[15].value;
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//光伏
				if (value == '5') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'photovoltaic') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.photoMode = modelData[i].modelParameter[0].value;
							newObj.PVStatus = modelData[i].modelParameter[1].value;
							newObj.panleType = modelData[i].modelParameter[2].value;
							newObj.efficiency = modelData[i].modelParameter[3].value;
							newObj.area = modelData[i].modelParameter[4].value;
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//风电
				if (value == '6') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'windPower') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.windPowerMode = modelData[i].modelParameter[2].value;
							newObj.windPowerStatus = modelData[i].modelParameter[0].value;
							newObj.windPowerType = modelData[i].modelParameter[1].value;
							newObj.windPowerModel = modelData[i].modelParameter[3].value;
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//电动汽车
				if (value == '7') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'vehicle') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.chargingType = modelData[i].modelParameter[0].value;
							newObj.workCharging = modelData[i].modelParameter[1].value;
							newObj.chargingEfficiency = modelData[i].modelParameter[2].value;
							newObj.capacity = modelData[i].modelParameter[3].value;
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//储能
				if (value == '8') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'storage') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							newObj.generatorMode = modelData[i].modelParameter[0].value;
							newObj.generatorStatus = modelData[i].modelParameter[1].value;
							newObj.powerFactor = modelData[i].modelParameter[2].value;
							newObj.parasiticPowerDraw = modelData[i].modelParameter[3].value;
							newObj.baseEfficiency = modelData[i].modelParameter[4].value;
							newObj.VMax = modelData[i].modelParameter[5].value;
							newObj.IMax = modelData[i].modelParameter[6].value;
							newObj.PMax = modelData[i].modelParameter[7].value;
							newObj.EMax = modelData[i].modelParameter[8].value;
							newObj.energy = modelData[i].modelParameter[9].value;
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
				}
				//负荷
				if (value == '9') {
					console.log(modelData)
					_this.gridData = [];
					let num = 1;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].icon == 'load') {
							let newObj = {};
							newObj.id = num++;
							newObj.name = modelData[i].key;
							if (_this.radio == 3) {
								newObj.powerA = modelData[i].modelParameter[2].value;
								newObj.powerB = modelData[i].modelParameter[3].value;
								newObj.powerC = modelData[i].modelParameter[4].value;
							} else if (_this.radio == 6) {
								if (modelData[i].modelParameter[2].value) {
									newObj.powerA = amplitudeAndAngle(modelData[i].modelParameter[2].value);
									if(newObj.powerA=='NaN+∠NaN'){
										newObj.powerA = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[3].value) {
									newObj.powerB = amplitudeAndAngle(modelData[i].modelParameter[3].value);
									if(newObj.powerB=='NaN+∠NaN'){
										newObj.powerB = modelData[i].modelParameter[3].value;
									}
								}
								if (modelData[i].modelParameter[4].value) {
									newObj.powerC = amplitudeAndAngle(modelData[i].modelParameter[4].value);
									if(newObj.powerC=='NaN+∠NaN'){
										newObj.powerC = modelData[i].modelParameter[4].value;
									}
								}
							} else if (_this.radio == 9) {
								let normalvolt = modelData[i].modelParameter[5].value;
								if (modelData[i].modelParameter[2].value) {
									newObj.powerA = unitValue(modelData[i].modelParameter[2].value, normalvolt);
									if(newObj.powerA=='NaN'){
										newObj.powerA = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[3].value) {
									newObj.powerB = unitValue(modelData[i].modelParameter[3].value, normalvolt);
									if(newObj.powerB=='NaN'){
										newObj.powerB = modelData[i].modelParameter[2].value;
									}
								}
								if (modelData[i].modelParameter[4].value) {
									newObj.powerC = unitValue(modelData[i].modelParameter[4].value, normalvolt);
									if(newObj.powerC=='NaN'){
										newObj.powerC = modelData[i].modelParameter[4].value;
									}
								}
							}
							console.log(newObj)
							_this.gridData.push(newObj)
						}
					}
					console.log(_this.gridData)
					}
			},
			// 全屏事件
			handleFullScreen() {
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			},
		},
		mounted() {
			console.log(this.$route.path)

		},
	};
</script>
<style scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		font-size: 22px;
		color: #fff;
		background-color: transparent;
	}

	.el-badge.item {
		background: url(../../assets/img/head/normalButton.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-right: -8px;
		margin-top: 5px;
	}

	.el-badge.item.help {
		background: url(../../assets/img/head/normalButton.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 5px;
		margin-right: -8px;
		animation: myfirst 5s;
	}

	.el-badge.item:hover {
		background: url(../../assets/img/head/clickButton.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 5px;
		margin-right: -8px;
	}

	/* 帮助动画 */
	@-webkit-keyframes myfirst {
		0% {
			background-image: url(../../assets/img/head/normalButton.png);
		}

		10% {
			background-image: url(../../assets/img/head/clickButton.png);
		}

		20% {
			background-image: url(../../assets/img/head/normalButton.png);
		}

		30% {
			background-image: url(../../assets/img/head/clickButton.png);
		}

		40% {
			background-image: url(../../assets/img/head/normalButton.png);
		}

		50% {
			background-image: url(../../assets/img/head/clickButton.png);
		}

		60% {
			background-image: url(../../assets/img/head/normalButton.png);
		}

		70% {
			background-image: url(../../assets/img/head/clickButton.png);
		}

		80% {
			background-image: url(../../assets/img/head/normalButton.png);
		}

		90% {
			background-image: url(../../assets/img/head/clickButton.png);
		}

		100% {
			background-image: url(../../assets/img/head/normalButton.png);
		}
	}


	.el-badge.itemspan {
		height: 35px;
	}
	
	.button_max{
		width: 140px!important;
	}

	.el-button--small,
	.el-button--small.is-round {
		width: 110px;
		height: 40px;
		background: transparent;
	}

	.el-badge.item .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: transparent;
		border: 0px solid #DCDFE6;
		color: #F4F4F5;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		font-size: 14px;
		border-radius: 4px;
	}

	.collapse-btn {
		float: left;
		padding: 0 21px;
		cursor: pointer;
		line-height: 40px;
	}

	.header .logo {
		float: left;
		background-image: url(../../assets/img/head/title.png);
		width: 540px;
		height: 58px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* line-height: 40px; */
	}

	.el-col.el-col-10 {
		margin-left: -14px
	}

	.btn-fullscreen {
		margin-right: 5px;
		font-size: 24px;
	}

	.btn-bell,
	.btn-fullscreen {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}

	.btn-bell-badge {
		position: absolute;
		right: 0;
		top: -2px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}

	.btn-bell .el-icon-bell {
		color: #fff;
	}

	.item {
		margin-top: 10px;
		margin-right: 20px;
	}

	.smallicon {
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 10px
	}

	.smallicon img {
		width: 15px;
		height: 15px;
		margin-top: 2px;
	}

	.icon {
		height: 40px;
		float: left;
		margin-right: 20px;
		cursor: pointer;
	}

	.icon img {
		margin-top: 10px
	}

	.header-user-con {
		display: flex;
		height: 40px;
		align-items: center;
		font-size: 36px;
	}


	.fileDialig div.text.item {
		cursor: pointer;
		margin-right: 0
	}

	.el-divider--horizontal {
		display: block;
		height: 1px;
		width: 100%;
		margin: 10px 0;
	}

	.a-upload {
		width: 90px;
		height: 19px;
		position: relative;
		color: #606266;
	}

	.a-upload input {
		width: 90px;
		height: 19px;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		cursor: pointer
	}

	.header>>>.el-dialog__body {
		padding-top: 10px
	}

	.header>>>.el-dialog .el-dialog__body {
		padding-top: 10px
	}

	.header>>>.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	.el-collapse-item div {
		cursor: pointer;
	}

	.el-select.el-select--small {
		width: 175px;
	}

	/* 模块选择 */
	body>ul {
		background-color: rgb(12, 72, 116);
	}

	body>ul li {
		color: #20A0FF
	}

	.el-popover.el-popper .el-dropdown-menu__item {}

	/* 故障设定 */
	.faultDialig .el-container {
		border: none !important
	}

	.faultDialig aside {
		background-color: transparent !important;
	}

	.el-tree {
		background-color: transparent;
	}

	.el-checkbox__label a {
		color: #20A0FF
	}
</style>

<style>
	/* 文件弹窗 */
	.fileDialig .el-dialog {
		margin-top: 32vh !important;
		width: 150px;
		height: 150px;
		background-image: url(../../assets/img/head/file.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	/* 实例信息弹窗 */
	.inforDialig .el-dialog {
		background-image: url(../../assets/img/head/information.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.inforDialig .el-radio {
		color: rgb(178, 235, 248)
	}

	.inforDialig .el-input__inner {
		background-color: transparent;
		background-image: url(../../assets/img/head/select.png);
		color: rgb(178, 235, 248);
		border-radius: 1px;
	}

	.el-select-dropdown.el-popper {
		background-color: rgb(12, 72, 116);
		color: rgb(178, 235, 248)
	}

	.el-select-dropdown__item {
		color: rgb(178, 235, 248)
	}

	.el-select-dropdown__item:hover {
		color: #20A0FF
	}

	.el-radio__inner,
	.el-radio__input.is-checked .el-radio__inner {
		background-color: rgb(12, 72, 116);
		border-color: rgb(33, 119, 183)
	}

	.el-radio__inner::after {
		background-color: rgb(60, 202, 255);
		height: 8px;
		width: 8px;
	}

	/* 故障设定弹窗 */
	.faultDialig .el-dialog {
		background-image: url(../../assets/img/head/faultSet.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.el-tree-node__label {
		color: rgb(178, 235, 248)
	}

	.el-tree-node__content:hover {
		background-color: rgb(30, 101, 148);
	}

	.el-tree-node:focus>.el-tree-node__content {
		background-color: rgb(30, 101, 148);
	}

	/* 指导原则 */
	.guidDialog .el-dialog {
		background-image: url(../../assets/img/head/guid.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	/* 考试弹窗 */
	.testDialog .el-dialog {
		padding: 40px;
		height: 380px;
		background-image: url(../../assets/img/head/test.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.testDialog .el-dialog .el-dialog__body div,
	.testDialog .el-dialog .el-dialog__body .el-radio {
		color: rgb(178, 235, 248)
	}

	/* 故障恢复 */
	.faultRecovery .el-dialog {
		background-image: url(../../assets/img/head/faultRecovery.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.faultRecovery .el-dialog .el-dialog__body div {
		color: rgb(178, 235, 248)
	}

	/* 恢复步骤 */
	.recoveryDialog .el-dialog {
		background-image: url(../../assets/img/head/recoveryDialog.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	/* 实验步骤 */
	.testStep .el-dialog {
		width: 600px;
		height: 400px;
		background-image: url(../../assets/img/head/testStep.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.testStep .el-dialog .el-dialog__body {
		height: 326px;
		overflow: scroll;
	}

	.el-collapse>div .el-collapse-item__header {
		background-image: url(../../assets/img/head/stepTitle.png);
		background-size: 50% 50%;
		background-position: left center;
		background-repeat: no-repeat;
		background-color: transparent;
	}

	.el-dialog {
		background-image: url(../../assets/img/normalBanck.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-color: rgb(2, 5, 22);
	}

	.testStep .el-dialog .el-dialog__header {
		padding: 25px;
	}

	.el-dialog__header .el-dialog__title {
		color: rgb(96, 238, 229);
	}

	.el-dialog__body {
		/* padding: 40px; */
		color: #DCDCDC
	}

	.el-collapse-item__header {
		color: #fff;
		font-size: 16px;
		padding-left: 20px;
	}

	.el-collapse-item__header i {
		display: none;
	}

	.el-collapse-item__wrap {
		background-color: rgb(1, 25, 56);

	}

	.el-collapse-item__content {
		color: #fff
	}

	.detileStep {
		margin-left: 9px;
	}

	.testStepDetile .el-dialog {
		height: 400px;
		width: 500px;
	}

	.testStepDetile .el-dialog .el-dialog__header {
		padding: 10px 20px 20px
	}

	.testStepDetile .el-dialog .el-dialog__body {
		font-size: 20px;
		line-height: 40px;
		text-indent: 2em;
	}


	/* 表格border样式 */
	.el-dialog .el-table--border,
	.el-table--group {
		border: 1px solid rgb(30, 101, 148);
	}

	.el-dialog .el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-t {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border th,
	.el-table__fixed-right-patch {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border th,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid rgb(30, 101, 148)
	}

	.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: transparent;
	}

	/* 按钮 */
	.el-dialog .el-button.el-button--default.el-button--small,
	.el-dialog .el-button.el-button--primary.el-button--small {
		background-image: url(../../assets/img/button_blue.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);

		animation: myfirst 5s;
		animation-iteration-count: infinite;
	}

	.el-dialog .el-button.el-button--default.el-button--small:hover,
	.el-dialog .el-button.el-button--primary.el-button--small:hover {
		/* background-image: url(../../assets/img/button_red.png); */
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
	}

	.el-dialog__headerbtn i {
		color: rgb(93, 237, 231) !important;
		font-size: 20px !important
	}

	.el-dialog__headerbtn i:hover {
		color: rgb(9, 142, 255) !important;
	}
</style>
